<template>
	<div class="son">
		<h1>我是Son组件</h1>
		<button @click="sendCar">点我把车传给App</button> <br><br>
		<button @click="sendHouse">点我把房子传给App</button> <br><br>
		<button @click="unbind">点我解绑get-car</button> <br><br>
		<button @click="handleClick">测试一下给组件绑定原生DOM事件</button>
	</div>
</template>

<script>
	export default {
		name:'Son',
		data() {
			return {
				car:'奔驰C63',
				house:'四合院'
			}
		},
		methods: {
			sendCar(){
				this.$emit('get-car',this.car)
			},
			sendHouse(){
				this.$emit('get-house',this.house)
			},
			unbind(){
				this.$off('get-car')
			},
			handleClick(){
				this.$emit('click')
			}
		},
	}
</script>

<style>
	.son{
		background-color: skyblue;
		padding: 20px;
	}
</style>